<template>
    <div class="main">
        <!--顶栏-->
        <el-row>
            <el-col :span="24" class="title_area">
                <h4>商品日销售统计</h4>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>商品日销售统计</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>

        <!--折线图top 5 商品-->
        <div id="myChart" :style="{width: '100%', height: '600px'}"></div>

        <!--&lt;!&ndash;列表&ndash;&gt;-->
        <!--<el-table :data="tableData"  border style="width: 100%;margin-top: 20px">-->
            <!--<el-table-column label="商品图" >-->
                <!--<template scope="scope">-->
                    <!--<img :src="scope.row.product.img" style="width:64px;height:64px; margin-top:8px;" alt="">-->
                <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column prop="product.name" label="商品名称"></el-table-column>-->
            <!--<el-table-column prop="product.price" label="价格"></el-table-column>-->
            <!--<el-table-column prop="product.discount" label="折扣价"></el-table-column>-->
            <!--<el-table-column prop="date" label="日期"></el-table-column>-->
            <!--<el-table-column prop="sale_count" label="销售数量"></el-table-column>-->
            <!--<el-table-column prop="total_amount" label="销售金额"></el-table-column>-->
        <!--</el-table>-->

        <!--&lt;!&ndash;分页&ndash;&gt;-->
        <!--<el-pagination-->
                <!--background-->
                <!--layout="prev, pager, next"-->
                <!--pagesize="20"-->
                <!--:total="pagination.total_pages">-->
        <!--</el-pagination>-->
    </div>
</template>
<script>

  export default {
    data() {
      return {
        options: [{
          value: 'price',
          label: '原价'
        }, {
          value: 'discount',
          label: '折扣价'
        }, {
          value: 'score',
          label: '评分'
        }],
        prop: '',
        className:'right',
        tableData:[],
        title: '',
        author: '',
        start: '',
        end: '',
        pagination: {
          total: 20,
          count: 20,
          current_page: 1,
          total_pages: 1
        },
        total_pages: 100,
        days: [],
        datas: []
      }
    },
    components: {

    },

    created() {
      this.productDaySaleList()
    },

    mounted() {
      this.drawLine()
    },

    methods: {

      async drawLine(){
        let that = this
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '商品日销量（元）'
          },
          tooltip : {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
//            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              boundaryGap : false,
              data : that.days
//
//                ['周一','周二','周三','周四','周五','周六','周日']
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series :
          that.datas
//            [
//            {
//              name:'邮件营销',
//              type:'line',
//              stack: '总量',
//              areaStyle: {},
//              data:[120, 132, 101, 134, 90, 230, 210]
//            },
//            {
//              name:'联盟广告',
//              type:'line',
//              stack: '总量',
//              areaStyle: {},
//              data:[220, 182, 191, 234, 290, 330, 310]
//            },
//            {
//              name:'视频广告',
//              type:'line',
//              stack: '总量',
//              areaStyle: {},
//              data:[150, 232, 201, 154, 190, 330, 410]
//            },
//            {
//              name:'直接访问',
//              type:'line',
//              stack: '总量',
//              areaStyle: {normal: {}},
//              data:[320, 332, 301, 334, 390, 330, 320]
//            },
//            {
//              name:'搜索引擎',
//              type:'line',
//              stack: '总量',
//              label: {
//                normal: {
//                  show: true,
//                  position: 'top'
//                }
//              },
//              areaStyle: {normal: {}},
//              data:[820, 932, 901, 934, 1290, 1330, 1320]
//            }
//          ]
        });
      },

      shelfeBook(index, table) {
        var id = table[index].id
        let params = {
          id: id
        }
        this.$store.dispatch('shelfBook', params).then((ret) => {
          if(ret.success) {
            this.$notify({
              title: '成功',
              message: '书籍上架成功',
              type: 'success'
            });
            this.bookList()
          }else{
            this.$notify({
              title: '失败',
              message: '修改状态失败',
              type: 'error'
            });
          }
        })

      },
      changeRight(value) {
        this.className = value
      },

      productDaySaleList() {
        let params = {
            date: '2018-11-21'
        }

        this.$store.dispatch('staticProductDay', params).then((ret) => {

          this.days = ret.date
          this.datas = ret.data

          this.drawLine()
//          console.log(this.days)
//          this.tableData = ret.data.product_sale_days.data
//          this.pagination.pagination  = ret.data.product_sale_days.meta.pagination
        })

      },

      createProduct() {
        this.$router.push({ name: "createProduct" });
      }
    }
  }
</script>
<style scoped>
    .header { background: #f2f2f2; }
</style>
